<template>
  <div class="box">
    <div class="left">
      <ul>
        <li @click="showSelect = 1" :class="showSelect == 1 ? 'select' : ''">
          参赛记录
        </li>
        <li @click="showSelect = 2" :class="showSelect == 2 ? 'select' : ''">
          个人信息
        </li>
        <li @click="showSelect = 3" :class="showSelect == 3 ? 'select' : ''">
          修改密码
        </li>
        <li @click="loginOut" :class="showSelect == 4 ? 'select' : ''">
          退出登录
        </li>
      </ul>
    </div>
    <div class="right" v-if="showSelect == 1">
      <div class="box_top">
        <ul v-if="!!RecordList.length">
          <li
            v-for="(item, index) in RecordList"
            :key="item.id"
            @click="goDetail(item.id)"
          >
            <el-image :src="filesUrl + item.picture"></el-image>
            <h4>{{ item.title }}</h4>
            <!-- <p>比赛时间：{{ item.startTime }}-{{ item.endTime }}</p> -->
            <p>主办方：{{ item.sponsor }}</p>
            <p>{{ item.enrollStatus == 0 ? "已报名" : "" }}</p>
            <p>{{ item.enrollStatus == 1 ? "已提交" : "" }}</p>
            <p>{{ item.enrollStatus == 2 ? "已评分" : "" }}</p>
          </li>
        </ul>
        <el-empty class="empty" description="没有参赛记录" v-else></el-empty>
      </div>
    </div>

    <div class="right" v-if="showSelect == 2">
      <div class="title">
        <img src="../assets/me.png" alt="" />
        <span>{{ userInfo.nickname }}</span>
      </div>

      <el-form
        label-position="top"
        :model="form"
        label-width="54px"
        :inline="true"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            class="input"
            v-model="userInfo.username"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="mobile">
          <el-input
            class="input"
            type="number"
            v-model="userInfo.mobile"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input
            class="input"
            :placeholder="userInfo.nickname"
            v-model="form.nickname"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
            class="input"
            type="email"
            :placeholder="userInfo.email"
            v-model="form.email"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在地" prop="region">
          <el-select v-model="form.region" placeholder="请选择所在地">
            <el-option label="武汉" value="武汉"></el-option>
            <el-option label="北京" value="北京"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="个人简介">
          <el-input
            class="textarea"
            type="textarea"
            placeholder="请输入个人简介"
            v-model="form.desc"
          ></el-input>
        </el-form-item>
        <el-form-item class="resource" label="身份" prop="resource">
          <el-radio-group v-model="form.resource">
            <el-radio label="学生"></el-radio>
            <el-radio label="教师&科研院所"></el-radio>
            <el-radio label="企业人员"></el-radio>
            <el-radio label="其他"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="职业" prop="nickname">
          <el-input
            class="input"
            placeholder="请输入职业"
            v-model="form.nickname"
          ></el-input>
        </el-form-item>
        <el-form-item label="单位">
          <el-input
            class="input"
            type="email"
            placeholder="请输入单位"
            v-model="form.nickname"
          ></el-input>
        </el-form-item>
        <div class="box_button">
          <el-button type="primary" @click="getUpdateInfo">提交修改</el-button>
        </div>
      </el-form>

      <!-- <el-form :model="form" label-width="54px">
        <el-form-item label="用户名">
          <el-input v-model="userInfo.username" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userInfo.mobile" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input
            :placeholder="userInfo.nickname"
            v-model="form.nickname"
          ></el-input>
        </el-form-item>
        <div class="box_button">
          <el-button type="primary" @click="getUpdateInfo">提交修改</el-button>
        </div>
      </el-form> -->
    </div>
    <div class="right" v-if="showSelect == 3">
      <el-form :model="form" label-width="120px">
        <el-form-item label="修改的密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="确认修改的密码">
          <el-input v-model="form.confirmPassword"></el-input>
        </el-form-item>
        <div class="box_button">
          <el-button type="primary" @click="getUpdatePassword"
            >提交修改</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  getUserInfo,
  getUpdateInfo,
  getUpdatePassword,
  getMyEnrollLogPage,
} from "../../api/index";
export default {
  data() {
    return {
      showSelect: 1,
      form: {
        nickname: "",
        username: "",
        password: "",
        confirmPassword: "",
        desc: "",
        region: "",
        resource: "",
        email: "",
      },
      userInfo: {},
      RecordList: [],
      rules: {
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      const res = await getUserInfo();
      if (res.code == 0) {
        this.userInfo = res.data;
      }
    },
    // 修改昵称
    async getUpdateInfo() {
      if (this.form.nickname == "") {
        this.$message("请填写你要修改的昵称");
      } else {
        const res = await getUpdateInfo({ nickname: this.form.nickname });
        if (res.code == 0) {
          this.$message({
            message: res.data,
            type: "success",
          });
        }
      }
    },
    // 修改密码
    async getUpdatePassword() {
      if (this.form.password === this.form.confirmPassword) {
        const res = await getUpdatePassword({ password: this.form.password });
        if (res.code == 0) {
          this.$message({
            message: res.data,
            type: "success",
          });
          this.form.password = "";
          this.form.confirmPassword = "";
        } else {
          this.$message("修改密码失败");
        }
      } else {
        this.$message("确认密码错误");
      }
    },
    // 我的报名列表
    async getMyEnrollLogPage() {
      const res = await getMyEnrollLogPage();
      if (res.code == 0) {
        // const { list } = res.data;
        this.RecordList = res.data.list;
        // this.oneRecordList = list.filter((item) => item.enrollStatus === 0);
        // this.twoRecordList = list.filter((item) => item.enrollStatus === 1);
        // this.threeRecordList = list.filter((item) => item.enrollStatus === 2);
        return;
      }
    },
    // 跳转到详情页面
    goDetail(id) {
      this.$router.push({ path: "/endDetail", query: { id: id } });
    },
    // 退出登录
    loginOut() {
      this.showSelect = 4;
      this.$confirm("确定退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出登录成功!",
          });
          localStorage.removeItem("token");
          this.$router.push("/");
          return false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
  computed: {},
  filters: {},
  watch: {},
  created() {
    this.getUserInfo();
    this.getMyEnrollLogPage();
    this.filesUrl = process.env.VUE_APP_FILE_URL;
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  min-height: 100vh;
  font-size: 1rem;
  background-color: #f4f5fc;

  box-sizing: border-box;
  .left {
    color: #333333;
    border-right: 1px solid #e3e3e3;

    ul {
      li {
        width: 184px;
        padding: 1.25rem;
        box-sizing: border-box;
        cursor: pointer;
      }
    }
  }
  .right {
    width: 80%;
    padding: 1.25rem;
    box-sizing: border-box;
    text-align: left;
    background-color: #fff;

    .input {
      width: 30vw;
    }
    .textarea {
      width: 61vw;
    }
    .resource {
      width: 100%;
    }

    .title {
      margin: 1.25rem 0;
      img {
        vertical-align: middle;
        margin-right: 1.25rem;
      }
    }
    .box_button {
      width: 100%;
      text-align: center;
      margin: 0 auto;
    }
    .box_top {
      display: flex;
      align-items: center;
      margin: 1.25rem auto;
      .empty {
        margin: 0 auto;
      }
    }
    ul {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;

      li {
        min-width: 200px;
        background-color: #fff;
        border-radius: 0.625rem;
        padding: 0.625rem;
        text-align: left;
        box-sizing: border-box;
        img {
          width: 100%;
          border-radius: 0.625rem;
        }
        h4 {
          margin: 0.6rem 0;
        }
      }
    }
  }

  .select {
    background-color: #ddebfa;
    color: #5ab6f8;
  }
}
@media screen and (min-width: 936px) {
  .box {
    .right ul {
      grid-template-columns: 1fr 1fr 1fr;
    }
    padding: 20px $overall-padding;
  }
}

@media screen and (max-width: 936px) {
  .box {
    padding: 20px $overall-padding;
    .right ul {
      grid-template-columns: 1fr 1fr;
    }
  }
}

@media screen and (max-width: 663px) {
  .box {
    .right ul {
      grid-template-columns: 1fr;
    }
    .pagination {
      display: none;
    }
    padding: 0;
    box-sizing: border-box;
    .left ul li {
      width: 100%;
    }
    .right {
      width: 75%;
    }
  }
}
</style>
